<template>
    <div class="page app-container">
        <el-button type="primary" @click="router.push('/stencil/fittings/add')">新增商品附加信息模板</el-button>
        <div class="hint" v-if="isShowFittings">
            <div>
                <el-icon>
                <WarningFilled />
            </el-icon>商品附加信息模板不会自动与产品关联，您可以在创建模板后，批量关联需要存在商品上。
            </div>
            <span @click="isShowFittings=false">不再提示</span>
        </div>
        <el-scrollbar max-height="calc(100vh - 300px)">
            <el-empty v-if="!data.length && !loading" />
            <div class="loading" v-if="loading && !data.length" v-loading="loading"></div>
            <template v-for="item in data" :key="item.id">
                <div class="fittings-item">
                    <div class="fittings-item-info">
                        <div class="title">
                            <span>{{ item.name }}</span>
                            <el-space>
                                <el-button type="primary" link>使用中的商品({{ item.productNum || 0 }})</el-button>
                                <el-button type="primary" link
                                    @click="router.push({ path: `/stencil/fittings/edit`, query: { id: item.id, remark: item.remark, content: item.content, name: item.name } })">编辑</el-button>
                            </el-space>
                        </div>
                        <div class="input">
                            <div><span>商品附加信息</span><span>最后编辑时间：{{ item.updateTime }}</span></div>
                            <div>{{ item.content }}</div>
                        </div>
                    </div>
                    <div class="fittings-item-del">
                        <el-icon @click="openDel(item)">
                            <DeleteFilled />
                        </el-icon>
                    </div>
                </div>
                <div class="remark"><span v-if="item.remark">备注：{{ item.remark }}</span></div>
            </template>
            <div class="pagination">
                <el-pagination v-model:current-page="params.page" v-model:page-size="params.size"
                    :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="init" @current-change="init" />
            </div>
        </el-scrollbar>
        <el-dialog v-model="delVisible" :width="directDel?400:500" center align-center :show-close="false">
            <template #title v-if="!directDel">
                <CustomTitle title="删除商品附加信息模板" />
            </template>
            <el-form label-position="top" :model="delParams" v-if="!directDel">
                <el-form-item label="该商品附加信息模板有关联商品信息，如果删除请修改模板设置">
                    <el-radio-group v-model="delParams.isContact">
                        <el-radio label="选择其他商品附加信息模板" :value="1"></el-radio>
                        <el-radio label="不关联任何商品附加信息模板" :value="0"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="选择商品附加信息模板" v-if="delParams.isContact">
                    <el-select placeholder="请选择" v-model="delParams.changedPrizeInfoId">
                        <el-option v-for="item in allTemp.filter(v => v.value != delParams.id)" :value="item.value"
                            :key="item.value" :label="item.label"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="sure" v-else>
                <div>
                    <el-icon>
                        <Warning />
                    </el-icon>
                </div>
                <span>此模板将被删除，是否继续？</span>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="delVisible = false">取 消</el-button>
                    <el-button type="primary" @click="delTemp">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from 'vue-router';
import CustomTitle from "@/components/CustomTitle/index.vue";
import { getList, getAllTemplate, deleteTemplate } from "@/apis/stencil/fittings";
import { ElMessage } from "element-plus";
import { useLocalStorage } from '@vueuse/core';

const isShowFittings = useLocalStorage('isShowFittings',true);

const router = useRouter();
const delVisible = ref(false);
const data = ref([]);
const total = ref(0)
const params = ref({
    pege:1,
    size:10
})
const delParams = ref({
    isContact: 0,
    changedPrizeInfoId: ''
});
const loading=ref(false)
const allTemp = ref([]);
const directDel=ref(false)
/**
 * 打开删除弹窗
 */
const openDel = (item) => {
    directDel.value=!item.productNum;
    delParams.value.id = item.id;
    delVisible.value = true;
}
/**
 * 删除模板
 */
const delTemp = async () => {
    const res = await deleteTemplate(delParams.value);
    if (res.code == 200) {
        ElMessage.success('删除成功');
        delVisible.value = false;
        init()
    }
}
const init = async () => {
    const res = await getList(params.value);
    data.value = res.data.records;
    total.value=res.data.total;
    loading.value=false;
}
const getAllTemp = async () => {
    const res = await getAllTemplate();
    allTemp.value = res.data;
}
onMounted(() => {
    loading.value=true;
    getAllTemp();
    init()
})
</script>

<style lang="scss" scoped>
@import 'index'
</style>